
<!DOCTYPE html>
<html>
<head>
<title>jQuery Color Picker, Selector, Chooser Plugin - colpick.com</title>
<meta name="description" content="colpick's jQuery RGB, HEX and HSB Color Picker plugin is free, lightweight and customizable">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/colpick.css" type="text/css" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/colpick.js"></script>
<script src="js/plugin.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

</head>

<body>
<div id="fb-root"></div>

<header id="site-header">
	<div id="header-cont">
		
		<nav id="top-menu" role="navigation">
			<ul>
				<li>Color Picker</li>
				<li class="current">jQuery Plugin</li>
			</ul>
		</nav>
		<h2>Simple RGB, HSB, HEX Color Picker jQuery Plugin</h2>
	</div>
</header>

<div id="content">
	
	
	
	<div id="pickers0">
		<div id="picker01"></div>
		<div id="picker02"></div>
	</div>
		<ul class="features">
			<li><span class="bold">No images!</span> Just a JS and a CSS file</li>
			<li>Very intuitive Photoshop-like interface</li>
			<li>Light and dark easy-to-customize CSS3 skins</li>
			<li><span class="bold">28 KB total</span> loaded by the browser</li>
			<li>Works and looks nice <span class="bold">even on IE7</span></li>
			<li>Extremely easy to implement</li>
		</ul>
	<h2 class="cleft">Usage</h2>
	<p>Download the plugin and add colpick.js and colpick.css to the head of your documents:</p>
	<pre>&lt;script src="js/colpick.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="css/colpick.css" type="text/css"/&gt;</pre>
	<p>Now you may call the <code>colpick</code> method on any jQuery object to create a color picker. By default you get a dropdown color picker:</p>
	
	<div class="example dark-example clearfix">
		<h3>Example - defaults</h3>
		<div class="example-code">	
			<p><span class="code-lang">HTML</span></p> <pre>&lt;button id="picker"&gt;Show Color Picker&lt;/button&gt;</pre>
			
			<p><span class="code-lang">JS</span></p> <pre>$('#picker').colpick();</pre>
		</div>
		<div class="example-ex">
			<button id="picker1">Show Color Picker</button>
		</div>
		<div class="clear"></div>
	</div>
	
	
	<h2>Options</h2>
	<p>Several options passed to the colpick function as an object allow you to customize the color picker. For example, passing <code>flat:true</code> makes the color picker always visible, as in the following example.</p>
	<div class="example dark-example clearfix">
		<h3>Example - Flat mode, hex layout, no submit button</h3>
		<div class="example-code">	
			<p><span class="code-lang">HTML</span></p><pre>&lt;div id="picker"&gt;&lt;/div&gt;</pre>
			
			<p><span class="code-lang">JS</span></p>
<pre>$('#picker').colpick({
	flat:true,
	layout:'hex',
	submit:0
});
</pre>
			
		</div>
		<div class="example-ex">
			<div id="picker2"></div>
		</div>
		<div class="clear"></div>
	</div>
	<a name="options"></a>
	<p>All the available options are:</p>
	<table border="" class="plugin-options">
		<tr>
			<th>Option</th>
			<th>Type</th>
			<th>Description</th>
		</tr>
		<tr>
			<td>flat</td>
			<td>boolean</td>
			<td>Flat mode just displays the color picker in place, always visible, with no show/hide behavior. Use it with <a href="#funcs">colpickShow()</a> and <a href="#funcs">colpickHide()</a> to define your own show/hide behavior or if you want the picker to be always visible. Default: false</td>
		</tr>
		<tr>
			<td>layout</td>
			<td>string</td>
			<td>Name of the color picker layout to use. Posible values are 'full' (RGB, HEX, and HSB fields), 'rgbhex' (no HSB fields) and hex (no HSB, no RGB). You can see the full layout at the top of the page. rgbhex and hex layouts are shown in the <a href="#examples">examples</a> below. Default: 'full'</td>
		</tr>
		<tr>
			<td>submit</td>
			<td>boolean</td>
			<td>If false the picker has no submit or OK button and no previous color viewer. If false use <a href="#funcs">onChange function</a> to get the picked color. Default: true</td>
		</tr>
		<tr>
			<td>colorScheme</td>
			<td>string</td>
			<td>The color scheme to use for the picker, 'light' or 'dark'. Default: 'light'</td>
		</tr>
		<tr>
			<td>submitText</td>
			<td>string</td>
			<td>The text to show on the submit button if active. Default: 'OK'</td>
		</tr>
		<tr>
			<td>color</td>
			<td>string or object</td>
			<td>Default color. Hex string (eg. 'ff0000') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:0, s:100, b:100}). Default: '11ff00'</td>
		</tr>
		<tr>
			<td>showEvent</td>
			<td>string</td>
			<td>Event that shows the color picker. Default: 'click'</td>
		</tr>
		<tr>
			<td>livePreview</td>
			<td>boolean</td>
			<td>If true color values change live while the user moves a selector or types in a field. Turn it off to improve speed. Default: true</td>
		</tr>
		<tr>
			<td>onBeforeShow</td>
			<td>function</td>
			<td>Callback function triggered before the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.</td>
		</tr>
		<tr>
			<td>onShow</td>
			<td>function</td>
			<td>Callback function triggered when the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.</td>
		</tr>
		<tr>
			<td>onHide</td>
			<td>function</td>
			<td>Callback function triggered when the color picker is hidden. Use it to define custom behavior. Should receive a colorpicker DOM object.</td>
		</tr>
		<tr>
			<td>onChange</td>
			<td>function</td>
			<td>Callback function triggered when the color is changed. This is the function that <strong>allows you to get the color picked by the user whenever it changes, whithout the user pressing the OK button</strong>. Should receive:
				<ul>
					<li>HSB object (eg. {h:0, s:100, b:100})</li>
					<li>HEX string (with no #)</li>
					<li>RGB object(eg. {r:255, g:0, b:0})</li>
					<li>el element, the parent element on which colorpicker() was called. Use it to modify this parent element on change (see first example below).</li>
					<li>bySetColor flag: if true, the onChange callback was fired by the colpickSetColor function and not by the user changing the color directly in the picker. There are some cases in which you'll want a different behaviour in this case (see last example).</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>onSubmit</td>
			<td>function</td>
			<td>Callback function <strong>triggered when the color is chosen by the user, using the OK button</strong>. Should receive exactly the same as onChange. It's never fired if using <code>submit:0</code> option.</td>
		</tr>
	</table>
	
	<a name="funcs"></a>
	
	<h2>jQuery.fn Functions</h2>
	<p>These functions are the color picker's interface. Use them to control the color picker externally, but not to get color values. To retrieve color values from the picker use the <a href="#options">onSubmit and onChange callbacks</a>.</p>
	<table border="" class="plugin-options">
		<tr>
			<th>Function</th>
			<th>Description</th>
		</tr>
		<tr>
			<td>colpick(options)</td>
			<td>The main function used to create a color picker.</td>
		</tr>
		<tr>
			<td>colpickHide()</td>
			<td>Hides de color picker. Accepts no arguments. Use it to hide the picker with an external trigger.</td>
		</tr>
		<tr>
			<td>colpickShow()</td>
			<td>Shows the color picker. Accepts no arguments. Use it to show the picker with an external trigger.</td>
		</tr>
		<tr>
			<td>colpickSetColor(col,setCurrent)</td>
			<td>Use it to set the picker color. The <a href="#options">onChange callback</a> is fired with bySetColor set to true. Parameters:
			<ul>
			<li>col: a hex string (eg. 'd78b5a') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:150, s:50, b:50})</li>
			<li>setCurrent: If true the color picker's current color (the one to the right in layouts with submit button) is set in addition to the new color, which is always set.</li>
			</ul></td>
		</tr>
	</table>
	
	<h2>jQuery Functions</h2>
	<p>The following functions are used internally by the color picker. However, they may also be required as utility functions by your application. They are made available as jQuery functions:</p>
	<table border="" class="plugin-options">
		<tr>
			<th>Function</th>
			<th>Description</th>
		</tr>
		<tr>
			<td>$.colpick.rgbToHex(rgb)</td>
			<td>Receives an object like {r:255, g:0, b:0} and returns the corresponding HEX string (with no #).</td>
		</tr>
		<tr>
			<td>$.colpick.rgbToHsb(rgb)</td>
			<td>Receives an object like {r:255, g:0, b:0} and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range.</td>
		</tr>
		<tr>
			<td>$.colpick.hsbToHex(hsb)</td>
			<td>Receives an object like {h:0, s:100, b:100} and returns the corresponding HEX string (with no #).</td>
		</tr>
		<tr>
			<td>$.colpick.hsbToRgb(hsb)</td>
			<td>Receives an object like {h:0, s:100, b:100} and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range.</td>
		</tr>
		<tr>
			<td>$.colpick.hexToHsb(hex)</td>
			<td>Receives a hex string with no # and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range.</td>
		</tr>
		<tr>
			<td>$.colpick.hexToRgb(hex)</td>
			<td>Receives a hex string with no # and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range.</td>
		</tr>
	</table>
	
	<a name="examples"></a>
	<h2>Examples</h2>
	
	<div class="example dark-example clearfix">
		<h3>Example - HEX textfield using onChange callback</h3>
		<div class="example-code">
			<p><span class="code-lang">HTML</span></p><pre># &lt;input type="text" id="picker"&gt;&lt;/input&gt;</pre>
				
			<p><span class="code-lang">JS</span></p> 
<pre>$('#picker').colpick({
	layout:'hex',
	submit:0,
	colorScheme:'dark',
	onChange:function(hsb,hex,rgb,el,bySetColor) {
		$(el).css('border-color','#'+hex);
		// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
		if(!bySetColor) $(el).val(hex);
	}
}).keyup(function(){
	$(this).colpickSetColor(this.value);
});</pre>
			
			<p><span class="code-lang">CSS</span></p> 
<pre>#picker {
	margin:0;
	padding:0;
	border:0;
	width:70px;
	height:20px;
	border-right:20px solid green;
	line-height:20px;
}</pre>
			
		</div>
		<div class="example-ex">
			# <input type="text" id="picker3">
		</div>
		<div class="clear"></div>
	</div>
	
	<div class="example dark-example clearfix">
		<h3>Example - Color boxes using onSubmit callback and rgbhex layout</h3>
		<div class="example-code">
			<p><span class="code-lang">HTML</span></p>
<pre>&lt;div class="color-box"&gt;&lt;/div&gt;
&lt;div class="color-box"&gt;&lt;/div&gt;
&lt;div class="color-box"&gt;&lt;/div&gt;</pre>
			
			<p><span class="code-lang">JS</span></p>
<pre>$('.color-box').colpick({
	colorScheme:'dark',
	layout:'rgbhex',
	color:'ff8800',
	onSubmit:function(hsb,hex,rgb,el) {
		$(el).css('background-color', '#'+hex);
		$(el).colpickHide();
	}
})
.css('background-color', '#ff8800');</pre>
			
				
			<p><span class="code-lang">CSS</span></p> 
<pre>.color-box {
	float:left;
	width:30px;
	height:30px;
	margin:5px;
	border: 1px solid white;
}</pre>
			
		</div>
		<div class="example-ex">
			<div id="picker4" class="ex-color-box"></div>
			<div id="picker5" class="ex-color-box"></div>
			<div id="picker6" class="ex-color-box"></div>
		</div>
		<div class="clear"></div>
	</div>
	
	

</div>
<script src="http://www.jq22.com/js/jq.js"></script>

</body>
</html>